<template>
  <div class='all'>
    <a-card :title='title' :bordered="false" style="width: 100%;">
      <a-table :columns="columns" :data-source="data" bordered :pagination="false" :scroll="{ y: 230 }">
        <template slot="name" slot-scope="text">
          <a>{{ text }}</a>
        </template>
      </a-table>
      <a-pagination
        style='float:right;margin-top: 10px;'
        v-model="current"
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        :page-size="pageSize"
        @showSizeChange="onShowSizeChange"
        v-if='!plan'
      >
        <template slot="buildOptionText" slot-scope="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </a-card>
  </div>
</template>

<script>
  export default {
    name: 'reportTable',
    props:{
      title:String,
      columns:Array,
      data:Array,
      current:{
        type:Number,
        default:1
      },
      pageSize:{
        type:Number,
        default:10
      },
      total:{
        type:Number,
        default:1
      },
      plan:String
    },
    data() {
      return{
        pageSizeOptions: ['10', '20', '30', '40', '50'],
      }
    },
    watch:{
      current(newName, oldName) {
        this.$emit('onSizeChange', newName, this.pageSize)
      }
    },
    methods:{
      onShowSizeChange(current, pageSize) {
        this.$emit('onSizeChange', current, pageSize)
      }
    }
  }
</script>

<style scoped>
.title{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  margin-left: 20px;
}
  >>> .ant-table-row{
    height: 31px !important;
  }
  >>> .ant-table-placeholder{
    /*height: 220px;*/
  }
  >>> .ant-table-wrapper{
    height: 275px;
  }
</style>